<template>
  <view>
    <view :style="{ height }" v-if="showPadding"></view>
    <view class="top-bar" :style="{ padding, height: rect.height + 'px', backgroundColor: bgColor }">
      <view style="width: 100%;">
        <slot />
      </view>
    </view>
  </view>
</template>
<script>
let systemInfo;
export default {
  props: {
    showPadding: Boolean,//是否显示占位
    bgColor: String,
  },
  data() {
    return {
      height: '120rpx',
      padding: '',
      rect: '',
    }
  },
  mounted() {
    this.getSystemInfo().then(this.updateSize)
  },
  methods: {
    getSystemInfo() {
      if (systemInfo) {
        return Promise.resolve(systemInfo)
      }
      return new Promise((resolve, reject) => {
        uni.getSystemInfo({
          success: (res) => {
            systemInfo = res
            resolve(res)
          },
          fail: reject
        })
      })
    },
    updateSize(info) {
      let { statusBarHeight, windowWidth } = info
      let rect = {
        bottom: 83,
        height: 32,
        left: 281,
        right: ~~(windowWidth * 0.95),
        top: ~~(windowWidth * 0.10),
        width: 87
      }
      // #ifdef MP
      rect = uni.getMenuButtonBoundingClientRect()
      // #endif
      this.height = `${rect.height + rect.top * 2 - statusBarHeight}px`
      this.padding = `${rect.top}px ${windowWidth - rect.right}px ${rect.top - statusBarHeight}px`
      this.rect = rect
    },
  },
}
</script>
<style scoped>
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  box-sizing: content-box;
}
</style>